<template>
  <div class="productAttr">
    <el-card class="box-card">
      <span class="iconfont icon-dingdan"></span><span>商品类型数据列表</span>
      <el-button style="float: right;" size="small" type="button" @click="goAttrAddPage">添加</el-button>
    </el-card>
    <el-table boreder style="width:100%" :data="productAttrList">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="类型名称" prop="name"></el-table-column>
      <el-table-column label="属性数量" prop="attribute_count"></el-table-column>
      <el-table-column label="参数数量" prop="param_count"></el-table-column>
      <el-table-column label="操作">
        <el-button size="small" @click="open">编辑</el-button>
        <el-button size="small" type="danger">删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum" :page-sizes="[2,5,10]" :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { fetchProductAttrList } from '@/api/product'
export default {
  name: "productAttr",
  data: function () {
    return {
      productAttrList: [],
      listQuery: {
        //key的名称和后台的接收名称是一致的，不能改
        pageNum: 1, //页码，默认是第一页
        pageSize: 5, //每页显示的数量
      },
      total: 0, //数据的总条数
      name: ''
    }
  },
  mounted () {
    this.getproductAttr()
  },
  methods: {
    async getproductAttr () {
      var res = await fetchProductAttrList(this.listQuery);
      console.log(res);
      this.productAttrList = res.data;
      this.total = res.total
      res.data.forEach(item => {
        this.name = item.name
        console.log(this.name);
      })
    },
    handleSizeChange (val) {
      console.log("修改一页的数据量", val);
      this.listQuery.pageSize = val;
      this.listQuery.pageNum = 1;
      this.getproductAttr();
    },
    handleCurrentChange (val) {
      console.log("修改当前页页码", val);
      this.listQuery.pageNum = val;
      this.getproductAttr();
    },
    goAttrAddPage () {
      this.$router.push("/pms/productAttrAdd")
    },
    open () {
      const h = this.$createElement;
      this.$msgbox({
        title: '编辑',
        message: h('span', { style: 'display:flex;margin:0 auto' }, [
          h('span', { style: 'white-space:nowrap;height:35px;line-height:35px' }, '类型名称'),
          h('el-input', { style: 'margin-left:5px' })
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.productAttr {
  margin: 20px;
  .box-card {
    margin-bottom: 20px;
  }
}
</style>